<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import daglService from '@/api/dagl'
import { GdajListQueryResult } from '@/api/dagl-dto'
// 入参
const emit = defineEmits(['refresh'])
/*
 * 打开弹框
 */
//
const dialogVisible = ref<boolean>(false)
const multipleSelection = ref<GdajListQueryResult[]>([])

const openDialog = (val: GdajListQueryResult[]) => {
  multipleSelection.value = val
  if (val.every((el) => el.dh)) {
    isShowScdh.value = false
  }
  dialogVisible.value = true
}

const isShowScdh = ref(true)

/*
 * 生成档号按钮
 */
const scdh = () => {
  const params = {
    daxxList: multipleSelection.value.map((el, index) => {
      return {
        gdbh: el.gdbh,
        dabh: el.dabh,
        sxh: index + 1,
      }
    }),
  } as any
  daglService
    .createDh(params)
    .then((res) => {
      if (res.data[0]?.dhxxList && res.data[0]?.dhxxList.length > 0) {
        multipleSelection.value.forEach((item: any) => {
          res.data[0]?.dhxxList.forEach((el) => {
            if (el.dabh === item.dabh && el.gdbh === item.gdbh) {
              item.dh = el.dh
            }
          })
        })
      }
      isShowScdh.value = false
      ElMessage({ type: 'success', message: '生成档号成功' })
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/**
 * 顺序交换
 */
const moveClick = (index: number, index2: number) => {
  const arr = multipleSelection.value
  arr.splice(index, 1, arr.splice(index2, 1, arr[index])[0])
}

const closeDialog = () => {
  isShowScdh.value = true
  emit('refresh')
}

defineExpose({ openDialog })
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="生成档号"
    width="50%"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <div class="dialog-box">
      <div class="left-table">
        <div class="info">案件将按照如下顺序依次生成档号，上下移动可以调整要号顺序：</div>
        <el-table :data="multipleSelection" height="calc(100% - 30px)">
          <el-table-column prop="ajmc" label="案件名称" />
          <el-table-column prop="bmsah" label="部门受案号" />
          <el-table-column prop="dh" label="档号">
            <template #default="scope">
              <div v-for="item in scope.row?.dh?.split(',')" :key="item">{{ item }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80">
            <template #default="scope">
              <el-link
                type="primary"
                :underline="false"
                v-if="scope.$index !== 0"
                @click="moveClick(scope.$index, scope.$index - 1)"
                ><el-icon><Top /></el-icon
              ></el-link>
              <el-link
                type="primary"
                :underline="false"
                v-if="scope.$index < multipleSelection.length - 1"
                @click="moveClick(scope.$index, scope.$index + 1)"
                ><el-icon><Bottom /></el-icon
              ></el-link>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <template #footer v-if="isShowScdh">
      <div class="dialog-footer">
        <el-button type="primary" @click="scdh">生成档号</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped>
.dialog-box {
  height: 500px;
  border-radius: 3px;
  border: solid 1px #dcdcdc;
  padding: 10px;
  .left-table {
    width: 100%;
    height: 100%;
    margin-right: 10px;
    .info {
      font-size: 16px;
      line-height: 32px;
    }
  }
}
</style>
